<script setup>
import { ref } from 'vue'

import { useRouter } from 'vue-router'

const router = useRouter();
var activePath = ref('/systemmanager/nodeinfo');

const setActivePath = () => {
    activePath.value = router.currentRoute._value.fullPath;
}
setActivePath();



var isCollapse = ref(false);
</script>

<template>
    <el-container>
        <el-aside width="180px">
            <el-menu :default-active="activePath" class="el-menu-vertical-demo" :collapse="isCollapse"
                :default-openeds="['1', '2']" expanded router>
               
                
           
                <!-- <el-menu-item index="/system/loginfo">
                    <el-icon>
                        <Collection />
                    </el-icon>
                    <span>系统日志</span>
                </el-menu-item> -->
                <el-menu-item index="/system/userinfo">
                    <el-icon>
                        <User />
                    </el-icon>
                    <span>用户管理</span>
                </el-menu-item>
                <el-menu-item index="/system/config" >
                    <el-icon>
                        <SetUp />
                    </el-icon>
                    <span>配置中心</span>
                </el-menu-item>
                <el-menu-item index="/system/media">
                    <el-icon :size="20">
                        <Film />
                    </el-icon>
                    <template #title>
                        <span>视频资源</span>
                    </template>
                </el-menu-item>
               

            </el-menu>
        </el-aside>
        <el-main>
            <el-card>
                <router-view />
            </el-card>
        </el-main>
    </el-container>
</template>

<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {

    min-height: 400px;
}

.el-menu-item.is-active {
    background: rgb(236, 245, 255) !important;
}

.display-center {
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>
